#include("/template/common/layout/_page_layout.html")
#@layout()

#define css()
<style>
    .title {
        color: #009688;
        font-weight: 700;
        font-family: "微软雅黑";
    }
</style>
#end

#define content()
<br>
<h2 class="title" align="center">社会稳定风险评估调查问卷表（个人）</h2><br>
<div style="margin: 0 10%">

    <form class="layui-form" action="">
        <input type="hidden" name="project.id" value="#(project.id)">
        <input type="hidden" name="questionnaire.type" value="#(questionnaire.type)">
        <input type="hidden" name="questionnaire.id" value="#(questionnaire.id)">
        <div style="padding: 20px;margin: 10px; background-color: #F2F2F2;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">项目基本信息</div>
                        <div class="layui-card-body">
                            <div class="layui-row">
                                <div class="layui-col-md12">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label"  style="width: 120px">评估项目名称：</label>
                                        <div class="layui-input-block">
                                            <input  type="text" id="project.name" name="project.name" value="#(project.name)"
                                                    lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input" style="width: 600px">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md12">
                                    <div class="layui-form-item layui-form-text">
                                        <label class="layui-form-label" style="width: 120px">项目简介：</label>
                                        <div class="layui-input-block" style="width: 600px;margin: 0 150px">
            <textarea id="demo" name="project.brief" lay-verify="required"
                      class="layui-textarea" style="width: 500px">#(project.brief)</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div style="padding: 20px;margin: 10px; background-color: #F2F2F2;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">问卷基本信息</div>
                        <div class="layui-card-body">
                            <div class="layui-row">
                                <div class="layui-col-md6">
                                    <div class="grid-demo grid-demo-bg1">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label"  style="width: 120px">问卷信息所属部门：</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="questionnaire.department" lay-verify="required" value="#(questionnaire.department)" autocomplete="off" placeholder="请输入标题"
                                                       class="layui-input"  style="width:250px;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="grid-demo">
                                        <div class="layui-form-item">
                                            <div class="layui-inline">
                                                <label class="layui-form-label"  style="width: 120px; margin-left: -40px;" >问卷调查时间：</label>
                                                <div class="layui-input-inline" >
                                                    <input type="text" name="questionnaire.surveyTime" id="date" value="#date(questionnaire.surveyTime,'yyyy-MM-dd')" lay-verify="date" placeholder="yyyy-MM-dd"
                                                           autocomplete="off" class="layui-input" style="width: 250px;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div style="padding: 20px;margin: 10px; background-color: #F2F2F2;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">问卷对象基本情况</div>
                        <div class="layui-card-body">
                            <div class="layui-row">
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label"  style="width: 120px">姓名：</label>
                                        <div class="layui-input-block" >
                                            <input type="text" name="questionnaire.personName" lay-verify="required" value="#(questionnaire.personName)" placeholder="请输入姓名" autocomplete="off"
                                                   class="layui-input" style="width: 250px;" >
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="grid-demo">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label" style="width: 120px">性别：</label>
                                            <div class="layui-input-block" >
                                                #if(questionnaire.personGender == 2)
                                                <input type="radio" name="questionnaire.personGender" value=1 title="男">
                                                <input type="radio" name="questionnaire.personGender" value=2 title="女" checked="checked">
                                                #else
                                                <input type="radio" name="questionnaire.personGender" value=1 title="男" checked="checked">
                                                <input type="radio" name="questionnaire.personGender" value=2 title="女">
                                                #end
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-row">
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label" style="width:120px">民族：</label>
                                            <div class="layui-input-inline" style="width: 250px">
                                                <select name="questionnaire.nationID" lay-verify="required" lay-search="">
                                                    #if(nation != null)
                                                    <option value="#(nation.id)">#(nation.name)</option>
                                                    #else
                                                    <option value="">直接选择或搜索选择</option>
                                                    #end
                                                    #statusOption(nationStatus);
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" style="width: 120px">年龄：</label>
                                        <div class="layui-input-inline" >
                                            <input type="number" name="questionnaire.age" lay-verify="required" value="#(questionnaire.age)" autocomplete="off" placeholder="请输入年龄"
                                                   class="layui-input" style="width: 250px;" >
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" style="width:120px">职业：</label>
                                        <div class="layui-input-inline" style="width: 250px">
                                            <select name="questionnaire.occupationID" lay-verify="required" lay-search="">
                                                #if(occupation != null)
                                                <option value="#(occupation.id)">#(occupation.name)</option>
                                                #else
                                                <option value="">直接选择或搜索选择</option>
                                                #end
                                                #statusOption(occupationStatus);
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-col-md6">
                                    <div class="layui-inline">
                                        <label class="layui-form-label" style="width:120px">联系电话：</label>
                                        <div class="layui-input-inline" >
                                            <input type="tel" name="questionnaire.phone" lay-verify="required|phone" value="#(questionnaire.phone)" autocomplete="off" class="layui-input" style="width: 250px;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" style="width: 120px">身份证号码：</label>
                                        <div class="layui-input-block" >
                                            <input type="text" name="questionnaire.IDCard" lay-verify="identity" value="#(questionnaire.IDCard)" placeholder="请输入身份证" autocomplete="off"
                                                   class="layui-input" style="width: 250px" >
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md6">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" style="width: 120px">文化程度：</label>
                                        <div class="layui-input-inline" style="width: 250px">
                                            <select name="questionnaire.degreeOfEducationID" lay-verify="required" lay-search="">
                                                #if(educational != null)
                                                <option value="#(educational.id)">#(educational.name)</option>
                                                #else
                                                <option value="">直接选择或搜索选择</option>
                                                #end
                                                #statusOption(educationalStatus);
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label" style="width: 120px">居住地址：</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="questionnaire.addr" lay-verify="required" value="#(questionnaire.addr)" autocomplete="off" placeholder="请输入居住地址"
                                                   class="layui-input" style="width: 690px;" >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div style="padding: 20px; margin: 10px;background-color: #F2F2F2;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">调查内容</div>
                        <div class="layui-card-body">
                            <ol>
                                <li class="qwe">
                                    <div class="layui-form-item">
                                        <div class="layui-row">
                                            <div class="layui-col-md10">
                                                <label class="layui-form-label">调查内容：</label>
                                                <div class="layui-input-block">
                                                    #if(questionnaireContents != null)
                                                    #set(name = questionnaireContents[0].name)
                                                    #set(content = questionnaireContents[0].content)
                                                    #else
                                                    #set(name = null)
                                                    #set(content = null)
                                                    #end
                                                    <input type="text" lay-verify="title" value="#(name)" autocomplete="off" placeholder="请输入调查题目"
                                                           class="layui-input name" style="width: 600px;">
                                                    <input type="text" lay-verify="title" value="#(content)" autocomplete="off" placeholder="请输入调查内容"
                                                           class="layui-input content" style="width: 600px;">
                                                </div>
                                            </div>
                                            <div class="layui-col-md2">
                                                <button type="button" class="layui-btn" id="add">添加行</button>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ol>
                            <br>
                            <div style="text-align: center">
                                <div class="layui-input-block">
                                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" id="sub">提交</button>
                                    <button type="button" class="layui-btn" id="ret" >返回</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    #for(i = 1; i < contentsLength; i++)
    <div class="name layui-hide">#(questionnaireContents[i].name)</div>
    <div class="contents layui-hide">#(questionnaireContents[i].content)</div>
    #end
    </form></div>
#end

#define js()
<script type="text/javascript">
    layui.use(['form', 'layer', 'element', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , laydate = layui.laydate
            , $ = layui.jquery
            , string = "?"
            , layedit = layui.layedit;
        var briefIndex = layedit.build('demo', {
            hideTool: ['link', 'unlink', 'face', 'image', 'help']
        });
        //日期
        laydate.render({
            elem: '#date'
        });


        //返回上一级
        $('#ret').click(function () {
            window.history.go(-1);
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            data.field['project.brief'] = layedit.getContent(briefIndex);
            util.sendAjax({
                type: 'POST',
                url: '#(ctxPath)/app/information/questionnaireAdd' + jointString(),
                data: $.param(data.field),
                loadFlag: true,
                success: function (data) {
                    window.location.href = document.referrer;
                }
            });
            return false;
        });



        function jointString() {
            $(".content").each(function () {
                string += "content" + "=" + $(this).val() + "&";
            });
            $(".name").each(function () {
                string += "name" + "=" + $(this).val() + "&";
            });
            return string;
        }

        (function(){
            var content,name;
            $('.contents').each(function(index){
                content = $(this).text();
                name = $('.name').get(index).text();
                $("ol").append(" <li class='qwe'><div class='layui-form-item'>\n" +
                    "        <div class='layui-row' >\n" +
                    "            <div class='layui-col-md10'>\n" +
                    "                <label class='layui-form-label'>调查内容：</label>\n" +
                    "                <div class='layui-input-block'>\n" +
                    "                    <input type='text' lay-verify='title' value='"+name+"' autocomplete='off' placeholder='请输入调查题目'\n" +
                    "                           class='layui-input name' style='width: 600px;'>\n" +
                    "                    <input type='text' lay-verify='title' value='"+content+"' autocomplete='off' placeholder='请输入调查内容'\n" +
                    "                           class='layui-input content' style='width: 600px;'>\n" +
                    "                </div>\n" +
                    "            </div>\n" +
                    "            <div class='layui-col-md2'>\n" +
                    "                <button type='button' class='layui-btn layui-btn-danger ' id='del'  >删除</button>\n" +
                    "            </div>\n" +
                    "        </div>\n" +
                    "    </div>" +
                    "</li>");
            });
        }());

        //添加行
        $(document).ready(function () {
            $("#add").click(function () {
                $("ol").append(" <li class='qwe'><div class='layui-form-item'>\n" +
                    "        <div class='layui-row' >\n" +
                    "            <div class='layui-col-md10'>\n" +
                    "                <label class='layui-form-label'>调查内容：</label>\n" +
                    "                <div class='layui-input-block'>\n" +
                    "                    <input type='text' lay-verify='title' autocomplete='off' placeholder='请输入调查题目'\n" +
                    "                           class='layui-input name' style='width: 600px;'>\n" +
                    "                    <input type='text' lay-verify='title' autocomplete='off' placeholder='请输入调查内容'\n" +
                    "                           class='layui-input content' style='width: 600px;'>\n" +
                    "                </div>\n" +
                    "            </div>\n" +
                    "            <div class='layui-col-md2'>\n" +
                    "                <button type='button' class='layui-btn layui-btn-danger ' id='del'  >删除</button>\n" +
                    "            </div>\n" +
                    "        </div>\n" +
                    "    </div>" +
                    "</li>");
                return false;
            });
        });

        var flag = '#(flag)';
        if (flag === "true") {
            $('#sub').remove();
            $('#del').remove();
            $('input').addClass('layui-disabled').attr("disabled","disabled");
        }

        //删除行
        $(document).on("click", "#del", function () {
            layer.msg("删除！");
        });
        $(document).on("click", "#del", function () {
            $(this).parents("li").remove();
        });


    });
</script>
#end